<template>
	<view>
		<cu-custom :isBack="true">
			<block slot="content">
				<view class="custom-title">碳普惠</view>
			</block>
		</cu-custom>
		<view class="manage-top-content">
			<view :class="selTab==index?'sel':'unsel'" v-for="(item,index) in tabList" :key="index" @click="selTab=index">
			  {{item.name}}
			</view>
		</view>
		<view class="padding-top-48 padding-left-32 padding-right-32">
			<view v-if="selTab==0">
				<view class="data-content">
					<view class="flex align-center justify-between">
						<view class="left-title bg">
							所有获取用能排放数据
							<text class="left-tilte-num">30</text>
						</view>
						<view class="flex align-center justify-center">
							<picker mode="date" :value="date" start="2015-09-01" end="2099-12-31" @change="DateChange">
								<view class="picker border-bottom">
									{{date}}
								</view>
							</picker>
							<image src="https://txr001.zthj.net/static/img/dateDown.png" class="img-32 "></image>
						</view>
					</view>
					<view class="data-num text-center">200</view>
					<view class="data-text text-center">碳排放量(吨)</view>
					<view class="flex text-center margin-top-xxl">
						<view class="flex-sub">
							<view class="data-user-num">34</view>
							<view class="data-user-name">用电(吨)</view>
						</view>
						<view class="flex-sub">
							<view class="data-user-num">34</view>
							<view class="data-user-name">用油(吨)</view>
						</view>
						<view class="flex-sub">
							<view class="data-user-num">34</view>
							<view class="data-user-name">用气(吨)</view>
						</view>
					</view>
					<view class="flex text-center margin-top-48">
						<view class="flex-sub">
							<view class="data-user-num">34</view>
							<view class="data-user-name">其他用能(吨)</view>
						</view>
						<view class="flex-sub">
							<view class="data-user-num">34</view>
							<view class="data-user-name">清洁用能(吨)</view>
						</view>
						<view class="flex-sub">
							<view class="data-user-num">34</view>
							<view class="data-user-name">污染与废弃物(吨)</view>
						</view>
					</view>
				</view>
				
				<view class="data-content margin-top-32">
					<view class="flex align-center justify-between">
						<view class="left-title">数据列表<text class="left-tilte-num">30</text></view>
						<view class="flex align-center justify-center">
							<image src="https://txr001.zthj.net/static/img/search.png" class="img-32 text-img-center"></image>
							<text class="search-text">搜索</text>
						</view>
					</view>
					
					<view class="data-table-title flex">
						<view class="flex-sub body-title padding-right-48">获取对象</view>
						<view class="flex-sub">碳排放量(吨)</view>
					</view>
					
					<view class="data-table-body flex" v-for="(info,index) in 6" :key="index">
						<view class="flex-sub body-title padding-right-48">某某某某某某环境服务集团有限公司</view>
						<view class="flex-sub flex align-center justify-between">
							<view class="body-num">6.66</view>
							<view>
								<text class="more">更多</text>
								<image src="https://txr001.zthj.net/static/img/right.png" class="img-32"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view v-if="selTab==1">
				<view class="data-content">
					<view class="flex align-center justify-between">
						<view class="left-title">上传列表<text class="left-tilte-num">2</text></view>
						<view class="flex align-center justify-center">
							<image src="https://txr001.zthj.net/static/img/search.png" class="img-32 text-img-center"></image>
							<text class="search-text">搜索</text>
						</view>
					</view>
					
					<view class="data-table-title flex">
						<view class="flex-twice body-title">上传列表</view>
						<view class="flex-sub text-right">操作</view>
					</view>
					
					<view class="data-table-body flex" v-for="(info,index) in 6" :key="index">
						<view class="flex-twice body-title">某某某某某某环境服务集团有限公司</view>
						<view class="flex-sub text-right">
							<image src="https://txr001.zthj.net/static/img/right.png" class="img-32"></image>
							<text class="cancel">取消关联</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selTab:0,
				tabList:[
					{name:"获取数据对象",value:"1"},
					{name:"上传数据对象",value:"2"}
				],
				date:"2022年12月"
			}
		},
		onLoad() {
		},
		methods: {
			
		}
	}
</script>

<style scoped lang="less">
	.manage-top-content{
		padding: 48rpx 0 0 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		// width: 700rpx;
		overflow-y: scroll;
		.sel{
			// min-width: 160rpx;
			padding: 0 16rpx;
			height: 50rpx;
			line-height:50rpx;
			background: #010101;
			border-radius: 30rpx;
			font-size: 32rpx;
			font-weight: 600;
			color: #FFFFFF;
			text-align: center;
		}
		.unsel{
			font-size: 32rpx;
			font-weight: 600;
			color: #010101;
			text-align: center;
			// margin-right: 60rpx;
		}
	}
	.data-content{
		background: #FFFFFF;
		border-radius: 48rpx;
		padding: 32rpx;
		.left-title{
			font-size: 32rpx;
			font-weight: 600;
			color: #010101;
			padding-right: 20rpx;
		}
		.bg{
			// background-color: rgba(255, 63, 63, 0.2);
		}
		.left-tilte-num{
			// width: 40rpx;
			margin-left: 14rpx;
			padding: 0 10rpx;
			height: 28rpx;
			background: #010101;
			border-radius: 17rpx;
			font-size: 20rpx;
			font-weight: 600;
			color: #FFFFFF;
		}
		.border-bottom{
			border-bottom: 2rpx solid #010101;
		}
		.data-num{
			margin-top: 72rpx;
			font-size: 160rpx;
			font-weight: 500;
			color: #010101;
		}
		.data-text{
			font-size: 24rpx;
			font-weight: 400;
			color: #010101;
		}
		.data-user-num{
			font-size: 56rpx;
			font-weight: 600;
			color: #010101;
		}
		.data-user-name{
			margin-top: 8rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #010101;
		}
		.search-text{
			font-size: 24rpx;
			font-weight: 400;
			color: #010101;
		}
		.data-table-title{
			font-size: 24rpx;
			font-weight: 400;
			color: #767879;
			padding: 32rpx 0 12rpx;
			border-bottom: 2rpx solid #767879;
		}
		.data-table-body{
			padding: 48rpx 0;
			border-bottom: 2rpx solid #D9D9D9;
			.body-title{
				font-size: 24rpx;
				font-weight: 400;
				color: #010101;
				
			}
			.body-num{
				font-size: 48rpx;
				font-weight: bold;
				color: #010101;
			}
			.more{
				font-size: 24rpx;
				font-weight: 400;
				color: #767879;
			}
			.cancel{
				font-size: 24rpx;
				font-weight: 400;
				color: #010101;
			}
		}
		
		
	}
</style>